<template>
    <div class="right-top">
        <div class="right-top-module1">
            <Title title="作物张势分析"></Title>
            <div class="right-top-module1-wapper">
                <chart :option="data"></chart>
            </div>
        </div>
        <div class="right-top-module2">
            <Title title="作物张势分析"></Title>
            <div class="right-top-module2-list">
                <List :data="state.items" :height="5.8" :showNumber="2" :speed="2000" width="200" class="content">
                    <template v-slot:itemCon="{ item, index }" style="width:100%">
                        <div class="content-item">
                            <div class="content-num">{{ index + 1 }}</div>
                            <div class="content-text">{{ item.name }}</div>
                            <div class="content-nums">{{ item.num }}</div>
                        </div>
                    </template>
                </List>
            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import chart from '@/components/echarts-box.vue'
import Title from '../common/title.vue'
import data from './rightTop'
import List from '@/components/list.vue'
import AnimateNumber from '@/components/number/index.vue'
const state = reactive({
    list: [
        { name: '二氧化碳', num: '320' },
        { name: '氧气', num: '180' },
        { name: '氮气', num: '400' },
        { name: 'PM2.5', num: '120' },
    ],
    items: [
        { name: '光照', num: '24000LUX' },
        { name: '温度', num: '26℃' },
        { name: '土壤湿度', num: '55%' },
        { name: '生长密度', num: '62%' },
        { name: '生长速率', num: '77%' },
        { name: '存活率', num: '69%' },
        { name: '覆盖率', num: '82%' },
    ]
})
</script>
<style lang="less" scoped>
.right-top {
    position: absolute;
    right: 20px;
    top: 20px;
    overflow: hidden;
    width: 400px;
    height: 450px;
    display: flex;
    flex-direction: column;

    &-module1 {
        &-wapper {
            margin: 10px ;
            width: 100%;
            height: 150px;
        }
    }

    &-module2 {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        &-list {
            height:100%;
            overflow: hidden;

            .center {
                margin-left: 20px;
                overflow: hidden;
                margin-right: 40px;
                .content {
                    transition: all 2s;
                    overflow: hidden;
                }
            }

        }
    }
}

.content-item {
    display: flex;
    font-size: 12px;

    width: 100%;
    margin: 10px 0;
    margin-bottom: 16px;

    &:last-child {
        margin-bottom: 0;
    }

    padding: 5px 16px;
    color: #d8fcff;
    border-radius: 11px;
    border-left: 1px solid rgba(0, 252, 255, 0.8);
    border-right: 1px solid rgba(0, 253, 255, 0) 0%;
    background: linear-gradient(270deg,
        rgba(0, 253, 255, 0) 0%,
        rgba(0, 252, 255, 0.2) 80%,
        rgba(0, 252, 255, 0.25) 100%);

    .content-num {
        color: #fff900;
    }

    .content-text {
        margin: 0 16px;
        flex:1;
    }

    .content-nums {
        color: #6af2ff;
    }
}
</style>